<script setup>
import Group from '@/components/Group/index.vue'
import cdcApi from '@/api/cdc/cdcApi'
import dataSourceApi from "@/api/datasource/dataSourceApi";
import { message } from 'ant-design-vue'
import WordEditor from '@/components/WordEditor/index.vue';
import databaseMappingConfig from './databaseMappingConfig.vue';
import cdcPropertiesConfig from './cdcPropertiesConfig.vue';

const cdcConfig = ref({
	visiable: false,
	viewFlag: false,
	descriptionFlag: false,
	databaseMappingConfigFlag: false,
	cdcPropertiesConfigFlag: false
})

const wordEditor = ref();
onMounted(() => {
	queryList();
})


const descriptionDiagClose = async () => {
	const c = wordEditor.value.getValue();
	cdcConfig.value.description = JSON.stringify(c);
	await save();
	wordEditor.value.clear()
}


const tableRef = ref();

const search = ref();

const currentGroupId = ref(0);

const refresh = () => {
	tableRef.value.refresh();

}

const columns = ref([
	{
		title: '编码',
		dataIndex: 'cdcCode',
		key: 'cdcCode',
		ellipsis: true,
	},
	{
		title: '名称',
		dataIndex: 'cdcName',
		key: 'cdcName',
		ellipsis: true,
	},
	{
		title: '来源',
		dataIndex: 'sourceDsName',
		resizable: true,
		key: 'sourceDsName',
		ellipsis: true,
	},
	{
		title: '目标',
		dataIndex: 'targetDsName',
		key: 'targetDsName',
		ellipsis: true,
	},
	{
		title: '运行状态',
		dataIndex: 'status',
		key: 'status',
		ellipsis: true,
		mapping: [{
			key: 'RUN',
			value: '运行中'
		},
		{
			key: 'STOP',
			value: '停止'
		}],
	},
	{
		title: '启停状态',
		dataIndex: 'disableFlag',
		key: 'disableFlag',
		mapping: [{
			key: '1',
			value: '停用'
		},
		{
			key: '0',
			value: '启用'
		}],
		fixed: 'right'

	}, {
		title: '操作',
		dataIndex: 'action',
		key: 'action',
		width: 450,
		fixed: 'right',
		buttonList: [
			{
				click: (field, record) => {
					cdcConfig.value = record;
					cdcConfig.value.descriptionFlag = true;

				},
				render: (record) => {
					return "描述";
				}
			},
			{
				type: "primary",
				click: (field, record) => {
					cdcConfig.value = record;

					cdcConfig.value.visiable = true;
					console.log(cdcConfig)
				},
				render: (record) => {
					if (record.status == 'RUN') {
						return null;
					}
					return "编辑";
				}
			},
			{
				click: (field, record) => {
					setStatusFlag(record);
				},
				render: (record) => {
					if (record.status == 'RUN') {
						return null;
					}
					return record.disableFlag == 1 ? "启用" : "停用";
				}
			},
			{
				click: (field, record) => {
					if (record.status == 'RUN') {
						stop(record);
					} else {
						start(record)
					}
				},
				render: (record) => {
					if (record.disableFlag == 1) {
						return null;
					}

					return record.status == 'RUN' ? "停止" : "运行";
				}
			},
			{
				click: (field, record) => {
					remove(record)
				},
				render: (record) => {
					return record.status == 'RUN' ? null : "删除";
				}
			},
			{
				click: (field, record) => {
					cdcConfig.value = record;
					cdcConfig.value.databaseMappingConfigFlag = true;
				},
				render: (record) => {
					return record.status == 'RUN' ? null : "配置";
				}
			},
			{
				click: (field, record) => {
					cdcConfig.value = record;
					cdcConfig.value.cdcPropertiesConfigFlag = true;
				},
				render: (record) => {
					return "参数";
				}
			},
		]
	},
])

const remove = async (r) => {
	await cdcApi.removeById({
		id: r.id
	})
	refresh();
}
const setStatusFlag = async (r) => {
	await cdcApi.setStatusFlag({
		id: r.id,
		disableFlag: r.disableFlag == 1 ? 0 : 1
	})
	refresh();
}

const stop = async (r) => {
	await cdcApi.stop({
		id: r.id
	})
	refresh();
}
const start = async (r) => {
	await cdcApi.start({
		id: r.id
	})
	refresh();
}
const loadData = async () => {
	const data = await cdcApi.list({
		groupId: currentGroupId.value == 0 ? null : currentGroupId.value
	});
	return data;
}
const selectTree = (id, code, name) => {
	currentGroupId.value = id;
	refresh();
}


const save = async () => {
	if (cdcConfig.value.groupId) {
		currentGroupId.value = cdcConfig.value.groupId
	}
	if (!currentGroupId.value) {
		message.info("请选择分组！");
		return
	}
	if (!cdcConfig.value.cdcCode) {
		message.info("请输入编码！");
		return
	}
	if (!cdcConfig.value.cdcName) {
		message.info("请输入名称！");
		return
	}
	cdcConfig.value.groupId = currentGroupId.value;

	await cdcApi.save(cdcConfig.value)
	cdcConfig.value = {}
	cdcConfig.value.visiable = false;

	refresh();
}
const dataSourceList = ref([])

const queryList = async () => {
	const data = await dataSourceApi.queryList()
	dataSourceList.value = data
}

const add = () => {
	cdcConfig.value = {};
	cdcConfig.value.visiable = true;
}

const cdcPropertiesRef = ref();

const saveProperties = () => {
	//进行参数解析并且保存
	cdcPropertiesRef.value.save();
	cdcConfig.value.cdcPropertiesConfigFlag = false;

}

const closeModal = () => {
	nextTick(() => {
		cdcConfig.value.databaseMappingConfigFlag = false;
	})
}


</script>

<template>

	<a-row :gutter="10" class="mb-2">
		<a-col :span="5">
			<Group :selectTree="selectTree" relationTypeCode="CDC"></Group>
		</a-col>
		<a-col :span="19">
			<a-row :gutter="10" class="mb-2">
				<a-col :span="24">
					<a-card>
						<a-space>
							<a-input-search placeholder="请输入内容" v-model:value="search"
								@search="refresh"></a-input-search>
							<a-button @click="add" type="primary">新增</a-button>
						</a-space>
					</a-card>
				</a-col>
			</a-row>

			<a-row :gutter="10" class="mb-2">
				<a-col :span="24">
					<a-card>
						<h-table :paged="false" ref="tableRef" :data="loadData" :columns="columns" height="420px">
						</h-table>
					</a-card>
				</a-col>
			</a-row>
		</a-col>
	</a-row>


	<drag-modal v-model:visible="cdcConfig.visiable" width="400px" :okFlag="!cdcConfig.viewFlag" @ok="save"
		@close="cdcConfig.visiable = false" :closable="false">
		<a-form :model="dsDiag" ref="formRef" autocomplete="off">
			<a-form-item label="编码">
				<a-input v-model:value="cdcConfig.cdcCode" :disabled="cdcConfig.id != null"></a-input>
			</a-form-item>
			<a-form-item label="名称">
				<a-input v-model:value="cdcConfig.cdcName"></a-input>
			</a-form-item>
			<a-form-item label="来源">
				<a-select v-model:value="cdcConfig.sourceDsId" clearable filterable @change="change" placeholder="Select" size="normal">

					<a-select-option v-for="item in dataSourceList" :value="item.id" :key="item.id"
						label="item.datasourceName" />

				</a-select>
			</a-form-item>

			<a-form-item label="目标源">
				<a-select v-model:value="cdcConfig.targetDsId" allowClear show-search placeholder="Select" size="normal">
					<a-select-option v-for="item in dataSourceList" :value="item.id" :key="item.id"
						label="item.datasourceName" />
				</a-select>
			</a-form-item>
		</a-form>
	</drag-modal>



	<a-modal v-model:open="cdcConfig.descriptionFlag" :footer="null" :closable="false" width="100%" height="100%"
		wrap-class-name="full-modal" :afterClose="descriptionDiagClose">
		<WordEditor ref="wordEditor" :value="cdcConfig.description" />
	</a-modal>

	<a-modal v-model:open="cdcConfig.databaseMappingConfigFlag" :footer="null" :closable="false" width="100%"
		height="100%" wrap-class-name="full-modal" :destroyOnClose="true">
		<databaseMappingConfig :closeModal="closeModal" :cdcConfig="cdcConfig"></databaseMappingConfig>
	</a-modal>



	<a-modal v-model:open="cdcConfig.cdcPropertiesConfigFlag" :closable="false" width="100%" height="100%"
		wrap-class-name="full-modal" class="my-modal" :destroyOnClose="true" @ok="saveProperties">
		<cdcPropertiesConfig ref="cdcPropertiesRef" :cdcId="cdcConfig.id"></cdcPropertiesConfig>
	</a-modal>
</template>




<style scoped lang="less">
.full-modal {
	.ant-modal {
		max-width: 100%;
		top: 0;
		padding-bottom: 0;
		margin: 0;
	}

	.ant-modal-content {
		display: flex;
		flex-direction: column;
		height: calc(100vh);
	}

	.ant-modal-body {
		flex: 1;
	}
}

.my-modal {
	.ant-modal-footer {
		margin-bottom: 15px !important;
		z-index: 999 !important;
	}
}
</style>
